<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link crossorigin='anonymous' href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    
    <div class="container">
        <h2 class="page-header">Promise 初体验</h2>
        <button class="btn btn-primary" id="btn">点击抽奖</button>
    </div>

    <script>
        //生成随机数
        function rand(m,n){
            return Math.ceil(Math.random() * (n-m+1)) + m-1;
        }
        /**
            点击按钮,  1s 后显示是否中奖(30%概率中奖)
                若中奖弹出    恭喜恭喜, 奖品为 10万 RMB 劳斯莱斯优惠券
                若未中奖弹出  再接再厉
        */

         //获取元素对象
         const btn=document.querySelector("#btn");

         btn.addEventListener('click',()=>{
            //    //定时器
            //    setTimeout(()=>{
            //      //     //30%  1-100  1 2 30
            //      //     //获取从1 - 100的一个随机数
            //      let res=rand(1,100);
            //      //     //判断
            //       if(res <= 30){
            //         alert('恭喜恭喜, 奖品为 10万 RMB 劳斯莱斯优惠券');
            //       } else {
            //         alert('再接再厉');
            //       }

            //    },1000);

            //Promise形式实现
            //resolve  解决 函数类型的数据
            //reject   拒绝 函数类型的数据

            const p=new Promise((resolve,reject)=>{

                setTimeout(()=>{
                    let res=rand(1,100);
                    if(res <= 30){
                        resolve(res);  // 将 promise 对象的状态设置为 『成功』
                    } else {
                        reject(res);  // 将 promise 对象的状态设置为 『失败』
                    }
                },1000);
            });

            //查看Promise的状态
            console.log(p);

            //调用 then 方法
            // value 值
            // reason 理由
             p.then((value)=>{
                   alert(`恭喜恭喜, 奖品为 10万 RMB 劳斯莱斯优惠券,您的中奖数字为:${value}`);
              },(reason)=>{
                   alert(`再接再厉,您的号码为:${reason}`);
              });

         });

     



    </script>

</body>
</html>